<div class="sidebar-menu toggle-others fixed">

    <div class="sidebar-menu-inner">

        <header class="logo-env">

            <!-- logo -->
            <div class="logo">
                <a href="/" class="logo-expanded">
                    <img src="/public/images/xyeslogo.png" width="80" alt="" />
                </a>

                <a href="/" class="logo-collapsed">
                    <img src="/public/images/logo-collapsed@2x.png" width="40" alt="" />
                </a>
            </div>

            <!-- This will toggle the mobile menu and will be visible only on mobile devices -->
            <div class="mobile-menu-toggle visible-xs">
                <a href="#" data-toggle="user-info-menu">
                    <i class="fa-bell-o"></i>
                    <span class="badge badge-success">7</span>
                </a>

                <a href="#" data-toggle="mobile-menu">
                    <i class="fa-bars"></i>
                </a>
            </div>

            <!-- This will open the popup with user profile settings, you can use for any purpose, just be creative -->
            *{<div class="settings-icon">}*
                *{<a href="#" data-toggle="settings-pane" data-animate="true">}*
                    *{<i class="linecons-cog"></i>}*
                *{</a>}*
            *{</div>}*


        </header>



        <ul id="main-menu" class="main-menu">
            <!-- add class "multiple-expanded" to allow multiple submenus to open -->
            <!-- class "auto-inherit-active-class" will automatically add "active" class for parent elements who are marked already with class "active" -->
            <li menuId="0">
                <a href="/">
                    <i class="linecons-cog"></i>
                    <span class="title">首页</span>
                </a>
            </li>
        #{list menuList,as:'menu'}
            #{if menu.business_id>0}
                <li menuId="${menu.business_id}" class="opened ">
                    <a href="${menu.url}">
                        <i class="linecons-cog"></i>
                        <span class="title">${menu.name}</span>
                    </a>
                </li>
            #{/if}
            #{if menu.children.size()>0 }
                <li>
                    <a href="extra-gallery.html">
                        <i class="linecons-beaker"></i>
                        <span class="title"> ${menu.name}</span>
                        <span class="label label-purple pull-right hidden-collapsed">${menu.children.size()}</span>
                    </a>
                    <ul>
                        #{list menu.children,as:'menu_2'}
                            <li menuId="${menu_2?.business_id}">
                                <a href="${menu_2.url}">
                                    <span class="title">${menu_2.name}</span>
                                </a>
                                #{if menu_2.children.size()>0 }
                                    <ul>
                                        #{list menu_2.children,as:'menu_3'}
                                            <li menuId="${menu_2?.business_id}">
                                                <a href="${menu_3.url}">
                                                    <span class="title">${menu_3.name}</span>
                                                </a>

                                            </li>
                                        #{/list}
                                    </ul>
                                #{/if}
                            </li>
                        #{/list}
                    </ul>
                </li>

            #{/if}
        #{/list}
        </ul>

    </div>

</div>

<script>

    $(function(){
        *{var menuId = '${flash.get("menuId")}';}*
        var menuId = '${menuId}';
        $("li").removeClass("active");
        $("li[menuId='"+menuId+"']").addClass("active");
        $("li[menuId='"+menuId+"']").parent().parent().addClass("active").addClass("opened");
    })

</script>